import React, { Component } from 'react';
// import $ from 'jquery';
import {Link} from 'react-router-dom';
import axios from 'axios';

import '@/components/MusicHall/songList/Banner.scss'


class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {
            List : []
        }
    }
    componentDidMount () {
        axios.get('https://api.bzqll.com/music/netease/hotSongList?key=579621905&cat=全部&limit=15&offset=0')
            .then(data => {
                // console.log(data.data.data);
                this.setState({
                    List:[...data.data.data]
                })
            })
            .catch((error) => {
                // console.log(error)
            })
    }
    componentDidUpdate () {
        // console.log(this.props.Type)
         axios.get('https://api.bzqll.com/music/netease/hotSongList?key=579621905&cat='+this.props.Type+'&limit=15&offset=0')
            .then(data => {
                // console.log(data.data.data);
                this.setState({
                    // List:[],
                    List : [...data.data.data]
                })
            })
            .catch((error) => {
                // console.log(error)
            })
    }
    render () {
        return (
            <div className= 'songList-banner-box'>
                  <ul className= 'songList-banner-ul'>{
                    this.state.List.map((item, index) => {
                        // console.log(item.playCount)
                        return (
                            <li key={item.id}>
                            <Link to = {'/player/' + item.id}>
                                <div className='songList-banner_li'>
                                    {/* 遮罩 */}
                                    <div className='cover_box'>
                                        <i className='iconfont icon-videofill'></i>
                                    </div>
                                    {/* 歌曲图片 */}
                                    <img className='songList-banner_img' src= {item.coverImgUrl} alt=''/>                                
                                </div>
                                {/* 歌曲名 */}
                                <h2>{item.title}</h2>
                            </Link> 
                           
                                {/* 歌手 */}
                                <p>{item.creator}</p>
                                {/* 播放量 */}
                                <span>播放量：{(item.playCount/10000).toFixed(2)}万</span>
                            </li>
                        )
                    })
                  }</ul>
            </div>
        )
    }
}

export default Banner;